import { Component } from "react";

class Counter extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        counts: 1,
    };
    shouldComponentUpdate(nextProps, nextState) {
        if (nextState.counts !== this.state.counts) {
            return true;
        }
        return false;
    }
    componentWillUpdate() {
        console.log("01->组件将要更新");
    }
    componentDidUpdate() {
        console.log("03->组件更新完成");
    }
    render() {
        console.log("02->组件更新");
        return (
            <>
                <div className='alert alert-info'>
                    当前数值为：{this.state.counts}
                </div>
                <button
                    className='btn btn-primary'
                    onClick={() =>
                        this.setState({ counts: this.state.counts + 1 })
                    }
                >
                    增加
                </button>
            </>
        );
    }
}

export default Counter;
